<!DOCTYPE html>
<html>

	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>登录</title>
		<link rel="stylesheet" href="../../css/mui.min.css">
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/vue.min.js"></script>
		<style>
		body{
			background: #fff;
		}
		.mui-bar-nav{
			background: #fff;
			box-shadow: none;
		}
		.mui-icon-left-nav {
			color: #60C68B;
		}
		.container_box{
			padding: 40px;
		}
		.cont_top{
			padding: 33px 0;
			padding-bottom:60px;
		}
		.cont_top p {
			color: #333;
			font-size: 18px;
		}
		.phone_box p{
			color: #666;
			font-size: 14px;
		}
		.phone_box  input{
			color: #033333;
			font-size: 22px;
			border: none;
			border-bottom: 1px solid #ccc;
			
		}
		.phone_box input::-webkit-input-placeholder {
			color: #ccc;
		}
		.phone_box button{
			margin-top: 30px;
			width: 276px;
			height: 44px;
			line-height: 44px;
			padding: 0;
			color: #fff;
			background: #ccc;
			border-radius: 10px;
			border: none;
		}
		.phone_box .btn_success{
			background: #60C68B;
		}
		.phone_box .tips{
			color: #f00;
			font-size: 14px;
			margin: 10px 0;
		}
	</style>
	</head>

	<body>
		<div id="app">
			<header id="header" class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" @click="onclick_dj"></a>
			</header>
			<div class="container_box">
				<div class="cont_top">
					<p>请用</p>
					<p>您的手机号登录</p>
				</div>
				<div class="phone_box">
					<P>中国(+86)</P>
					<input type="number" v-model="phone_msg" placeholder="请输入您的手机号码" @blur="zh" @focus="zh">
					<p class="tips">{{tip1}}</p>
					<button :class="{btn_success:class_Flag}" @click="submit_yzm">发送验证码</button>
				</div>
			</div>
		</div>
		<script src="../../js/vue-resource.js"></script>
		<script src="../../js/base.js"></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					class_Flag: false, //按钮是否绿色
					phone_msg: "", //手机号
					tip1: '',
					code: '', //随机数
					userType: "3", //用户类型 默认 1-后台管理人员2-保洁人接3-普通用户
					CS_data: {} //传输至
				},
				methods: {
					onclick_dj() {
						window.history.go(-1);
					},
					zh() {
						this.tip1 = '';
						var gz = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
						if (!this.phone_msg) {
							this.tip1 = '手机号不能为空';
							this.class_Flag = false;
						} else if (!gz.test(this.phone_msg)) {
							this.tip1 = "*请输入正确的手机号*";
							this.class_Flag = false;
						} else {
							this.class_Flag = true;
						}
					},
					submit_yzm() { //发送验证码！
						this.tip1 = '';
						var gz = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
						if (!this.phone_msg) {
							this.tip1 = '手机号不能为空';
							this.class_Flag = false;
							return;
						} else if (!gz.test(this.phone_msg)) {
							this.tip1 = "*请输入正确的手机号*";
							this.class_Flag = false;
							return;
						} else {
							this.class_Flag = true;
							// 执行正确的命令

							var CS_data = {
								phone_msg: this.phone_msg,
								userType: this.userType
							}
							this.CS_data = CS_data;

							var that = this;
							plus.nativeUI.showWaiting();
							HTTP.post(this, 'loginController/sendMessage', function(res) {
								// 传值值!打开页面							
								BASE.Custom_window('../../html/login/login_yzm.html', 'login_yzm.html', that.CS_data);
								mui.toast("发送成功");
							}, function(res) {
								mui.toast(res);
							}, {
								phoneNum: this.phone_msg,
								code: this.code,
								userType: this.userType
							})

						}
					}
				},
				created() {
					//生成随机6位数
					var code = "";
					for (let i = 0; i < 5; i++) {
						var radom = Math.floor(Math.random() * 10);
						code += radom;
					}
					// 保证第一位数字不为零
					var num = Math.ceil(Math.random() * 1000000000 % 9);
					this.code = num + code;
				},
				watch: {
					phone_msg: function(val) {
						if (val.length == "11") {
							this.zh();
						} else {
							this.zh();
						}
					},
				}
			})
		</script>
	</body>

</html>
